<template>
  <div class="absolute z-10 bottom-16 right-4" v-if="isShow">
    <a-button type="primary" shape="circle" @click="showModuleConfig" title="模型设置">
      <Icon icon="ant-design:setting-filled" color="" />
    </a-button>

    <ModelDesignDrawer
      :classify="classify"
      v-if="classify === MODEL_TYPE.LIST"
      @register="registerModelDrawer"
      @success="handleSuccess"
    />
    <FormDesignContainer
      :modelConfig="modelConfig"
      @change="handleSuccess"
      v-else-if="classify === MODEL_TYPE.FORM && isOpen"
    />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import { useDrawer } from '/@/components/Drawer';
  import { useUserStore } from '/@/store/modules/user';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

  import { MODEL_TYPE } from '/@/api/config-center/model-design';
  import { ParamsKeyEnum } from '/@/enums/appEnum';
  import { getParamKeyApi } from '/@/api/admin/param';
  import { Icon } from '/@/components/Icon';
  import ModelDesignDrawer from '/@/views/config-center/model-design/index.vue';

  export default defineComponent({
    name: 'ShowModelDesign',
    components: {
      ModelDesignDrawer,
      FormDesignContainer: createAsyncComponent(
        () => import('/@/views/config-center/design-form-list/components/FormDesignContainer.vue'),
        { loading: true, size: 'small' },
      ),
      Icon,
    },
    props: {
      modelId: { type: [String, Number], requerd: true },
      classify: { type: Number as PropType<MODEL_TYPE>, requerd: true },
    },
    emits: ['success'],
    setup(props, { emit }) {
      const isShow = ref(false);
      const [registerModelDrawer, { openDrawer: openModelDrawer }] = useDrawer();
      const userStore = useUserStore();
      const isOpen = ref(false);
      const modelConfig = ref();
      async function getShow() {
        const ret = await getParamKeyApi(ParamsKeyEnum.DESIGN);

        if (ret) {
          const roles = userStore.getRoleList;
          for (const val of roles) {
            if (ret.includes(val)) {
              isShow.value = true;

              return;
            }
          }
        }
      }
      onMounted(() => {
        getShow();
      });
      function handleSuccess(flag) {
        if (props.classify === MODEL_TYPE.FORM) {
          if (flag) {
            emit('success');
          }
        } else {
          emit('success');
        }
        isOpen.value = false;
      }
      function showModuleConfig() {
        if (props.classify === MODEL_TYPE.LIST) {
          openModelDrawer(true, {
            record: { modelId: props.modelId },
            isUpdate: true,
          });
          return;
        }
        if (props.classify === MODEL_TYPE.FORM) {
          isOpen.value = true;
          modelConfig.value = { modelId: props.modelId };
        }
      }
      return {
        isShow,
        MODEL_TYPE,
        isOpen,
        modelConfig,
        handleSuccess,
        registerModelDrawer,
        showModuleConfig,
      };
    },
  });
</script>
<style lang="less" scoped></style>
